<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Advanced Font Settings</title>
<script src="js/cr.js"></script>
<script src="js/cr/ui.js"></script>
<script src="js/cr/ui/overlay.js"></script>
<script src="slider.js"></script>
<script src="pending_changes.js"></script>
<script src="options.js"></script>
<link rel="stylesheet" href="css/chrome_shared.css">
<link rel="stylesheet" href="css/overlay.css">
<link rel="stylesheet" href="css/widgets.css">
<link rel="stylesheet" href="css/uber_shared.css">
<link rel="stylesheet" href="slider.css">
<style>
body.uber-frame {
  margin-inline-start: 18px;
  margin-inline-end: 30px;
}

body.uber-frame section {
  max-width: 650px;
}

body.uber-frame section:last-of-type {
  margin-top: 28px;
}

body.uber-frame header {
  left: 0;
  padding-inline-start: 18px;
  right: 0;
}

body.uber-frame header > h1 {
  padding-bottom: 16px;
}

h1 {
  font-size: 16px;
}

.script-header {
  margin-top: 12px;
}

h3 {
  margin-bottom: 11px;
  font-size: 14px;
}

section {
  font-size: 12px;
}

.bordered {
  border: 1px solid #D9D9D9;
  border-radius: 2px;
}

.smaller {
  font-size: smaller;
}

.font-settings-div {
  margin-inline-end: 5px;
  width: 180px;
}

.font-settings-div:first-of-type {
  width: 138px;
}

.font-settings-div > :first-child {
  margin-bottom: 10px;
}

.font-settings-div > * {
  margin-bottom: 14px;
}

.font-settings-row {
  display: -webkit-flex;
  width: 800px;
}

.sample-text-div {
  display: -webkit-flex;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

.sample-text-span {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 20px;
}

#overlay-container {
  z-index: 100;
}

#standardFontSample {
  font-family: standard;
}

#serifFontSample {
  font-family: serif;
}

#sansSerifFontSample {
  font-family: sans-serif;
}

#fixedFontSample {
  font-family: monospace;
}

#minFontSample {
  font-family: standard;
}

select {
  width: 100%;
}

#footer > button {
  padding-inline-start: 9px;
  padding-inline-end: 9px;
}

#footer > #apply-settings {
  padding-inline-start: 17px;
  padding-inline-end: 17px;
}

#apply-settings:enabled {
  background-color: #4f7dd6;
  background-image: none;
  border-color: #2a4aac;
  box-shadow: none;
  color: #fbfafb;
  text-shadow: none;
}

.slider-legend {
  position: relative;
  /* This offset is needed to get the legend to align with the slider. */
  top: -7px;
}

.slider-container {
  display: inline-block;
  position: relative;
  top: 1px;
  height: 24px;
  width: 88px;
}
</style>
</head>
<body class="uber-frame">
<div id="overlay-container" class="overlay" hidden>
  <div id="reset-overlay" class="page">
    <div class="close-button"></div>
    <div id="reset-this-script-overlay-dialog" hidden>
      <h1>Reset</h1>
      <div id="reset-this-script-overlay-dialog-content" class="content-area">
      </div>
      <div class="action-area">
        <div class="button-strip">
          <button id="reset-this-script-cancel">Cancel</button>
          <button id="reset-this-script-ok">Reset</button>
        </div>
      </div>
    </div>
    <div id="reset-all-scripts-overlay-dialog" hidden>
      <h1>Reset</h1>
      <div class="content-area">
        Are you sure you want to reset all settings?
      </div>
      <div class="action-area">
        <div class="button-strip">
          <button id="reset-all-cancel">Cancel</button>
          <button id="reset-all-ok">Reset</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="page">
  <header style="transform: translateX(0px);">
    <h1>Advanced Font Settings</h1>
  </header>
  <section>
    <h3 class="script-header">Script</h3>
    <div class="font-settings-row">
      <select style="width: 200px" id="scriptList"></select>
    </div>
  </section>
  <section>
    <h3>Proportional fonts</h3>
    <div class="font-settings-row">
      <div class="font-settings-div">
        <div id="defaultFontSizeLabel"></div>
        <div style="width: 100%; margin-bottom: 0">
          <span class="slider-legend smaller">Aa</span>
          <div id="defaultFontSizeSliderContainer" class="slider-container"></div>
          <span class="slider-legend">Aa</span>
        </div>
      </div>
      <div class="font-settings-div">
        <div>Standard</div>
        <div><select id="standardFontList"></select></div>
      </div>
      <div class="font-settings-div">
        <div>Serif</div>
        <div><select id="serifFontList"></select></div>
      </div>
      <div class="font-settings-div">
        <div>Sans-Serif</div>
        <div><select id="sansSerifFontList"></select></div>
      </div>
    </div>
    <div class="bordered" style="position: relative; left: 0; right: 0; height: 160px; width: 702px;">
      <div class="sample-text-div" style="height: 33%">
        <span id='standardFontSample' class="sample-text-span">
          The quick brown fox jumps over the lazy dog.
        </span>
      </div>
      <div class="sample-text-div" style="height: 33%">
        <span id="serifFontSample" class="sample-text-span">
          The quick brown fox jumps over the lazy dog.
        </span>
      </div>
      <div class="sample-text-div" style="height: 33%">
        <span id="sansSerifFontSample" class="sample-text-span">
          The quick brown fox jumps over the lazy dog.
        </span>
      </div>
    </div>
  </section>
  <section>
    <h3>Fixed-width fonts</h3>
    <div class="font-settings-row">
      <div class="font-settings-div">
        <div id="fixedFontSizeLabel"></div>
        <div style="width: 100%; margin-bottom: 0">
          <span class="slider-legend smaller">Aa</span>
          <div id="defaultFixedFontSizeSliderContainer" class="slider-container"></div>
          <span class="slider-legend">Aa</span>
        </div>
      </div>
      <div class="font-settings-div">
        <div>Fixed</div>
        <div><select id="fixedFontList"></select></div>
      </div>
    </div>
    <div class="bordered" style="position: relative; overflow: hidden; left: 0; right: 0; height: 58px; width: 702px;">
      <div class="sample-text-div" style="height: 100%">
        <span id="fixedFontSample" class="sample-text-span">
          The quick brown fox jumps over the lazy dog.
        </span>
      </div>
    </div>
  </section>
  <section>
    <h3>Minimum font size</h3>
    <div class="font-settings-row">
      <div class="font-settings-div">
        <div id="minFontSizeLabel" style="margin-bottom: 8px"></div>
        <div style="width: 100%; margin-bottom: 12px">
          <span class="slider-legend smaller">Aa</span>
          <div id="minFontSizeSliderContainer" class="slider-container"></div>
          <span class="slider-legend">Aa</span>
        </div>
      </div>
    </div>
    <div class="bordered" style="position: relative; overflow: hidden; left: 0; right: 0; height: 58px; width: 702px;">
      <div class="sample-text-div" style="height: 100%">
        <span id="minFontSample" class="sample-text-span">
          The quick brown fox jumps over the lazy dog.
        </span>
      </div>
    </div>
  </section>
  <section id="footer">
    <button id="apply-settings">
      Apply settings
    </button>
    <button id="reset-this-script-button">
      Reset settings for this script
    </button>
    <button id="reset-all-button">
      Reset all settings
    </button>
  </section>
</div>
</body>
</html>
